<template>
  <div>
    <div ref="chartRef" class="chart-view"></div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  config: {
    type: Object,
    required: true
  }
})

const chartRef = ref(null)
const chartEl = ref(null)

defineExpose({
  getChartEl: () => chartEl.value
})

onMounted(() => {
  chartEl.value = echarts.init(chartRef.value)
  chartEl.value.setOption(props.config)
})
</script>

<style scoped lang="scss">
.chart-view {
  width: 100%;
  height: 300px;
}
</style>
